<template>
  <div>
    <div class="container">
      <div class="row p-4 mt-5 color-333">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">关于我们</div>
          <div class="fs-30">ABOUT US</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="col-md-12 d-flex f-wrap mb-5">
          <div class="col-md-6 col-sm-12 pr-0 pl-0">
            <img src="../assets/images/17.png" class="img-responsive w-100" alt />
          </div>
          <div class="col-md-6 col-sm-12 p-4 explain bg-f7">
            <p class="fs-24 text-center">辽宁华睿新媒体职业学校</p>
            <div class="fs-14 mb-4">
              辽宁华睿新媒体职业学校是经由辽宁华睿星辉教育集团、日本札幌国际大学、T-P
              LAN日本奖学金协会三方共同创立的全日制国际化新媒体职业学校。学校坐落于环
              境宜人，风景优美的辉山风景区，办学特色鲜明，实行准军事化封闭式管理模式，
              全面保证学生的学习、生活、就业质量。
            </div>
            <div class="col-md-12 text-center">
              <router-link to="/about" tag="span" class="more color-white fs-16">了解更多</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid bg-f7 mb-5">
      <div class="row pt-5 bg-f7">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">金牌专业</div>
          <div class="fs-30">PRODUCT CENTER</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="container pb-5">
          <div class="row major-list">
            <div class="col-md-4 col-sm-12 major-box">
              <router-link :to="{name: 'MajorDetail', query: {id: 0}}" tag="div" class="w-100">
                <img src="../assets/images/18.png" class="img-responsive w-100" alt />
                <span class="fs-24 color-white">新媒体</span>
              </router-link>
            </div>
            <div class="col-md-4 col-sm-12 major-box">
              <router-link :to="{name: 'MajorDetail', query: {id: 1}}" tag="div">
                <img src="../assets/images/19.png" class="img-responsive w-100" alt />
                <span class="fs-24 color-white">新文旅</span>
              </router-link>
            </div>
            <div class="col-md-4 col-sm-12 major-box">
              <router-link to="/international" tag="div">
                <img src="../assets/images/20.png" class="img-responsive w-100" alt />
                <span class="fs-24 color-white">中日国际班</span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container mb-5">
      <div class="row p-4 mt-5 color-333">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">专家讲师</div>
          <div class="fs-30">EXPERT LECTURER</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      <div class="row teacher-box">
          <div class="col-md-3 col-sm-6">
          <router-link :to="{name: 'TeacherDetail', query: {id: 0}}" tag="div">
            <img src="../assets/images/image1.jpg" class="img-responsive w-100" alt />
            <div class="col-md-10 p-3">
              <p class="fs-18">傅博杰</p>
              <div class="fs-14">擅长领域：影视戏剧表演 动漫 声优训练</div>
            </div>
          </router-link>
        </div>
        <div class="col-md-3 col-sm-6">
          <router-link :to="{name: 'TeacherDetail', query: {id: 1}}" tag="div">
            <img src="../assets/images/image2.png" class="img-responsive w-100" alt />
            <div class="col-md-10 p-3">
              <p class="fs-18">郭丹丹</p>
              <div class="fs-14">擅长领域：播音与主持</div>
            </div>
          </router-link>
        </div>
          <div class="col-md-3 col-sm-6">
          <router-link :to="{name: 'TeacherDetail', query: {id: 2}}" tag="div">
            <img src="../assets/images/image3.png" class="img-responsive w-100" alt />
            <div class="col-md-10 p-3">
              <p class="fs-18">李勇志</p>
              <div class="fs-14">擅长领域：短视频制作 微电影 导演</div>
            </div>
          </router-link>
        </div>
        <div class="col-md-3 col-sm-6">
          <router-link :to="{name: 'TeacherDetail', query: {id: 3}}" tag="div">
            <img src="../assets/images/image4.png" class="img-responsive w-100" alt />
            <div class="col-md-10 p-3">
              <p class="fs-18">杜晓虎</p>
              <div class="fs-14">擅长领域：图片拍摄 短视频剪辑</div>
            </div>
          </router-link>
        </div>
        <div class="col-md-12 text-center mt-5">
          <router-link to="/teacher" tag="span" class="more color-white fs-16">查看更多</router-link>
        </div>
      </div>
    </div>

    <div class="container-fluid bg-f7">
      <div class="row pt-5 bg-f7">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">合作企业</div>
          <div class="fs-30">COOPERATIVE ENTERPRISE</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      <div class="swiper-box w-100 mb-5">
        <div class="swiper-container-two">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="container d-flex">
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/a1.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/a2.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/a3.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 d-none d-md-block">
                  <img src="../assets/images/a4.jpg" class="img-responsive w-100" alt />
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="container d-flex">
                <div class="col-md-3 col-sm-4 d-md-none">
                  <img src="../assets/images/a4.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/a5.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/a6.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/a7.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 d-none d-md-block">
                  <img src="../assets/images/a8.jpg" class="img-responsive w-100" alt />
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="container d-flex ">
                <div class="col-md-3 d-md-none">
                  <img src="../assets/images/a7.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 d-md-none">
                  <img src="../assets/images/a8.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3">
                  <img src="../assets/images/a9.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/a10.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/a11.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/a12.jpg" class="img-responsive w-100" alt />
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="container d-flex">
                <div class="col-md-3 col-sm-4 d-md-none">
                  <img src="../assets/images/a10.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-md-none">
                  <img src="../assets/images/a11.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-md-none">
                  <img src="../assets/images/a12.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/a13.jpg" class="img-responsive w-100" alt />
                </div>
              </div>
            </div>
            <div class="swiper-slide d-md-none">
              <div class="container d-flex">
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/a13.jpg" class="img-responsive w-100" alt />
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  mounted() {
    new Swiper(".swiper-container-two", {
      autoplay: true,
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  }
};
</script>

<style lang="scss">
@import "../assets/scss/style.scss";

@media screen and (max-width: 768px) {
  .major-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
    .major-box {
      margin-bottom: 0.9375rem;
    }
  }
  .teacher-box {
    margin-left: 0 !important;
    margin-right: 0 !important;
    img {
      height: 11.4375rem;
    }
    .col-sm-6 {
      width: 50% !important;
      margin-bottom: 1.25rem;
    }
  }

  .swiper-container-two  {
    .swiper-slide {
      img {
        width: 6.75rem !important;
        box-shadow: 0px 0px 0.3125rem 0px rgba(0, 0, 0, 0.1);
        margin: 0 !important;
      }
    }
      
    .swiper-button-next {
      color: map-get($colors, "blue");
      --swiper-navigation-size: 0.875rem; /* 设置按钮大小 */
      margin-right: 0 !important;
    }
    .swiper-button-prev {
      color: map-get($colors, "blue");
      --swiper-navigation-size: 0.875rem; /* 设置按钮大小 */
      margin-left: 0 !important;
    }
  }
}

.line-box {
  span {
    display: block;
    width: 40px;
    height: 2px;
    &:first-child {
      background: map-get($colors, "blue");
    }
    &:last-child {
      background: map-get($colors, "yellow");
    }
  }
}

.explain {
  .fs-14 {
    line-height: 30px;
  }
}

.more {
  border-radius: 100px;
  background: map-get($colors, "blue");
  padding: 8px 20px;
  cursor: pointer;
}

.major-box {
  position: relative;
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: default;
  }
}

.teacher-box {
  .col-md-10 {
    align-items: stretch;
    background: #fff;
    margin: 0 auto;
    margin-top: -20px;
    &:nth-child(even) {
      border-bottom: 5px solid map-get($colors, "yellow");
    }
  }
  & :nth-child(odd) {
    .col-md-10 {
      border-bottom: 5px solid map-get($colors, "blue");
    }
  }
  .fs-14 {
    height: 40px;
  }
  // img {
  //   height: 310px;
  // }
}

.swiper-container-two {
  position: relative;
  img {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
  }
  .swiper-button-next {
    color: map-get($colors, "blue");
    --swiper-navigation-size: 28px; /* 设置按钮大小 */
    margin-right: 5%;
  }
  .swiper-button-prev {
    color: map-get($colors, "blue");
    --swiper-navigation-size: 28px; /* 设置按钮大小 */
    margin-left: 5%;
  }
}
</style>